var smallBox = document.getElementById("small-box");
var floatBox = document.getElementById("float-box");
var bigBox = document.getElementById("big-box");
var bigImg = bigBox.getElementsByTagName("img")[0];
var footDiv = document.getElementById("foot-div");

smallBox.onmouseover = function () {
    floatBox.style.display = "block";
    bigBox.style.display = "block";
}
smallBox.onmouseout = function () {
    floatBox.style.display = "none";
    bigBox.style.display = "none";
}

smallBox.onmousemove = function (ev) {
    var event = ev || window.event;
    var left = event.clientX - smallBox.offsetLeft - floatBox.offsetWidth / 2;
    var top = event.clientY - smallBox.offsetTop - floatBox.offsetHeight / 2;

    if (left < 0) {
        left = 0
    } else if (left > (smallBox.offsetWidth - floatBox.offsetWidth)) {
        left = smallBox.offsetWidth - floatBox.offsetWidth;
    }
    if (top < 0) {
        top = 0
    } else if (top > (smallBox.offsetHeight - floatBox.offsetHeight)) {
        top = smallBox.offsetHeight - floatBox.offsetHeight;
    }

    floatBox.style.left = left + "px";
    floatBox.style.top = top + "px";

    bigImg.style.left = -(left * bigImg.offsetWidth) / bigBox.offsetWidth + "px";
    bigImg.style.top = -(top * bigImg.offsetHeight) / bigBox.offsetHeight + "px";

}

var imgIndex = footDiv.getElementsByTagName("img");
for (var i = 0; i < imgIndex.length; i++) {
    imgIndex[i].onmouseover = function () {
        smallBox.getElementsByTagName("img")[0].src = this.src;
        bigBox.getElementsByTagName("img")[0].src = this.src;
        for (var i = 0; i < imgIndex.length; i++) {
            imgIndex[i].className = "imgDiv";
        }
        this.className += " active";
    }
}